<template>
    <div class="dialog" v-if="form">
        <div class="title">业务系统基本信息</div>
        <div class="wrap1" v-if="form.cloudUp">
            <div>
                <div>系统名称:</div>
                {{ form.cloudUp.projectname }}
            </div>
            <div>
                <div>云服务商:</div>{{form.cloudUp.supplierName}}
            </div>
            <div>
                <div>上线时间:</div>
                {{ form.cloudUp.onlinetime }}
            </div>
            <div>
                <div>上云区域:</div>
                {{ form.cloudUp.cloudUpAreaValue }}
            </div>
            <div>
                <div>业务部门:</div>
                {{ form.cloudUp.officeName }}
            </div>
            <div>
                <div>业主方联系人:</div>
                {{ form.cloudUp.contactsNickName }}
            </div>
            <div>
                <div>联系电话:</div>
                {{ form.cloudUp.contactsinfo }}
            </div>
            <div>
                <div>邮箱:</div>
                {{ form.cloudUp.email }}
            </div>
            <div>
                <div>承建单位:</div>
                {{ form.cloudUp.constunit }}
            </div>
            <div>
                <div>承建方联系人:</div>
                {{ form.cloudUp.constcts }}
            </div>
            <div>
                <div>联系电话:</div>
                {{ form.cloudUp.constctsinfo }}
            </div>
            <div>
                <div>邮籍:</div>
                {{ form.cloudUp.constemail }}
            </div>
            <div style="width: 100%">
                <div style="width: auto">系统建设（运维）资金来源:</div>
                {{ form.cloudUp.fundFrom }}
            </div>
            <div style="width: 100%">
                <div style="width: auto">自行落实部门上云经费:</div>
                {{ form.cloudUp.fundBySelf ? "是" : "否" }}
            </div>
            <div style="width: 100%">
                <div>项目简介:</div>
                {{ form.cloudUp.introduction }}
            </div>
            <div style="width: 100%">
                <div>申请理由:</div>
                {{ form.cloudUp.remarks }}
            </div>
        </div>
        <div class="title">申请资源</div>
        <div style="width: 100%">
            <label style="margin-right: 10px">服务商:</label>
            <span>{{ form.cloudSupplier_label }}</span>
        </div>
        <!-- <el-button type="primary" style="padding: 10px 40px; margin: 20px 0" @click="showAdd(1,false)">新增</el-button> -->
        <div class="wrap" style="">
            <div class="wrap_title">
                <div>服务器</div>
            </div>
            <div style="padding: 20px 20px; width: 100%;height: 620px;overflow-y: auto;">
                <el-table
                    v-if="form.hosts"
                    :data="form.hosts"
                    style="margin-top: 13px; overflow-x: auto"
                >
                    <el-table-column label="资源类型"  fixed>
                        <template slot-scope="scope">
                            {{
                                scope.row.flavorType == 1
                                    ? "云服务器"
                                    : scope.row.flavorType == 2
                                    ? "高性能服务器"
                                    : scope.row.serverCode
                                    ? "数据库"
                                    : "存储产品"
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="实例名称"  fixed>
                        <template slot-scope="scope">
                            <span v-if="scope.row.flavorType">{{
                                scope.row.hostName
                            }}</span>
                            <span v-else-if="scope.row.serverCode">{{
                                scope.row.hostInstanceName
                            }}</span>
                            <span
                                v-else-if="!scope.row.hostInstanceNames.length"
                            ></span>
                            <div
                                v-else
                                style="margin-bottom: 6px"
                                v-for="(item, index) in scope.row
                                    .hostInstanceNames"
                                :key="index"
                            >
                                {{ item }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="资源详情" width="300">
                        <template slot-scope="scope">
                            <div
                                v-if="scope.row.flavorType"
                                placement="top-start"
                                width="300"
                                trigger="hover"
                            >
                                <div
                                    style="margin-bottom: 6px"
                                >
                                    <label>IP：</label>
                                    <!-- {{ scope.row.osName }} -->
                                    {{ scope.row.specifyIp }}

                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                >
                                    <label>序列号：</label>
                                    <!-- {{ scope.row.osName }} -->
                                    {{ scope.row.sn }}

                                </div>
                                <!-- <div style="margin-bottom: 6px">
                                    <label>可用域：</label
                                    >{{ scope.row.availableDomain_label }}
                                </div> -->
                                <!-- <div style="margin-bottom: 6px">
                                    <label
                                        >{{
                                            scope.row.flavorType == 1
                                                ? "规格分类"
                                                : "资源类型"
                                        }}：</label
                                    >{{ scope.row.cloudFlavorCode_label }}
                                </div> -->
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="scope.row.flavorType == 1"
                                >
                                    <label>规格：</label>
                                    <!-- {{ scope.row.cloudFlavorCode_desc }} -->
                                    {{ scope.row.cpuNumber }}核vCPU；{{ scope.row.memorySize }}G内存；
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="scope.row.flavorType == 2"
                                >
                                    <label>规格：</label>
                                    {{ scope.row.cloudFlavorCode_desc|| cloudFlavorCodeDesc(scope.row.cloudFlavorCode) }}
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="scope.row.flavorType == 1 && scope.row.osDisk"
                                >
                                    <label>系统盘：</label
                                    >{{
                                        scope.row.osDisk?scope.row.osDisk.diskServerName:''
                                    }}，{{ scope.row.osDisk?scope.row.osDisk.dataDiskSize:'' }}GB
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                >
                                    <label>操作系统：</label>
                                    {{ scope.row.osName||TranslateosName(scope.row.osServerCode) }}

                                </div>
                                <div style="margin-bottom: 6px" v-if="scope.row.flavorType == 1">
                                    <label>
                                        数据盘(共<span style="color: #e83112">{{
                                            scope.row.disks.length
                                        }}</span
                                        >块){{
                                            scope.row.disks.length ? ":" : ""
                                        }}</label>
                                    >
                                </div>
                                <div
                                    v-if="scope.row.flavorType == 1"
                                    style="margin: 0 0 6px 16px"
                                    v-for="(item, index) in scope.row.disks"
                                    :key="index"
                                >
                                    <span>{{ item.diskServerName||item.diskServerCode_label }}</span
                                    >，{{ item.dataDiskSize }}GB
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="huanyuan1" label="变更内容" width="300">
                        <template slot-scope="scope" >
                          <div v-show="scope.row.changeTo && !(form.hosts[scope.$index].changeTo.insStatus)">
                            未变更
                          </div>
                          <div v-show="!scope.row.changeTo">
                            已回收
                          </div>
                            <div
                                v-show="
                                    scope.row.changeTo
                                        ? form.hosts[scope.$index].changeTo
                                              .insStatus == 'UPDATE'
                                        : form.hosts[scope.$index].insStatus ==
                                          'UPDATE'
                                "
                            >
                                <div
                                    v-if="
                                        scope.row.changeTo
                                            ? true
                                            : false
                                    "
                                    placement="top-start"
                                    width="300"
                                    trigger="hover"
                                >
                                    <div v-if="scope.row.changeTo.specifyIp" style="margin-bottom: 6px" v-show="form.hosts[scope.$index].specifyIp != scope.row.changeTo.specifyIp">
                                        <label>IP：</label>
                                        <!-- {{ scope.row.osName }} -->
                                        {{ scope.row.changeTo.specifyIp }}

                                    </div>
                                    <div v-if="scope.row.changeTo.sn" style="margin-bottom: 6px" v-show="form.hosts[scope.$index].sn != scope.row.changeTo.sn">
                                        <label>序列号：</label>
                                        <!-- {{ scope.row.osName }} -->
                                        {{ scope.row.changeTo.sn }}

                                    </div>
                                    <!-- <template>
                                        <div v-show="availableDomains(form.hosts[scope.$index].availableDomain) != availableDomains(scope.row.changeTo?scope.row.changeTo.availableDomain : scope.row.availableDomain)" style="margin-bottom: 6px">
                                            <label>可用域：</label>
                                            {{
                                                availableDomains(scope.row.changeTo?scope.row.changeTo.availableDomain : scope.row.availableDomain)
                                            }}
                                        </div>
                                    </template> -->
                                    <div style="margin-bottom: 6px" v-show="(form.hosts[scope.$index].cloudFlavorCode != scope.row.changeTo.cloudFlavorCode)">
                                        <label
                                            >
                                            {{
                                                (scope.row.changeTo?scope.row.changeTo.flavorType:'1') == '1'
                                                ? "规格分类"
                                                : "资源类型"
                                            }}：
                                            <template v-if="scope.row.flavorType == 1">
                                                {{
                                                    cloudFlavorCodes(scope.row.changeTo?scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode)
                                                }}
                                            </template>
                                            <template v-if="scope.row.flavorType == 2">
                                                {{
                                                    wlfwqLists(scope.row.changeTo?scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode)
                                                }}
                                            </template>
                                            </label
                                        >
                                    </div>
                                    <template>
                                        <div style="margin-bottom: 6px" v-show="(form.hosts[scope.$index].memorySize != scope.row.changeTo.memorySize || form.hosts[scope.$index].cpuNumber != scope.row.changeTo.cpuNumber) || (form.hosts[scope.$index].cloudFlavorCode != scope.row.changeTo.cloudFlavorCode)">
                                            <label>规格：</label>
                                            <template v-if="scope.row.flavorType == 1">
                                                {{scope.row.changeTo?scope.row.changeTo.cpuNumber:scope.row.cpuNumber}}vCPU； {{scope.row.changeTo?scope.row.changeTo.memorySize:scope.row.memorySize}}G内存
                                                <!-- {{cloudFlavorCodess(scope.row.changeTo?scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode)}} -->
                                            </template>
                                            <template v-if="scope.row.flavorType == 2">
                                                {{wlfwqListss(scope.row.changeTo?scope.row.changeTo.cloudFlavorCode : scope.row.cloudFlavorCode)}}
                                            </template>
                                        </div>
                                    </template>
                                    <div
                                        style="margin-bottom: 6px"
                                        v-if="scope.row.changeTo.flavorType == 1 && scope.row.changeTo.osDisk"
                                        v-show="(form.hosts[scope.$index].osDisk.diskServerCode != scope.row.changeTo.osDisk.diskServerCode) || (form.hosts[scope.$index].osDisk.dataDiskSize != scope.row.changeTo.osDisk.dataDiskSize)"
                                    >
                                        <label>系统盘：</label
                                        >{{
                                            scope.row.changeTo
                                                ? scope.row.changeTo.osDisk
                                                      .diskServerName
                                                : scope.row.osDisk
                                                      .diskServerName
                                        }}，{{
                                            scope.row.changeTo
                                                ? scope.row.changeTo.osDisk
                                                      .dataDiskSize
                                                : scope.row.osDisk.dataDiskSize
                                        }}GB
                                    </div>
                                    <div
                                        style="margin-bottom: 6px"
                                        v-if="
                                            scope.row.changeTo
                                                ? scope.row.changeTo.flavorType
                                                : scope.row.flavorType == 1
                                        "
                                        v-show="(form.hosts[scope.$index].osServerCode != scope.row.changeTo.osServerCode)">
                                        <label>操作系统：</label>
                                        {{ scope.row.changeTo.osName || TranslateosName(scope.row.changeTo.osServerCode) }}
                                    </div>
                                    <template v-if="scope.row.flavorType == 1 && form.hosts[scope.$index].disks.length != scope.row.changeTo.disks.length" v-show="form.hosts[scope.$index].disks.length != scope.row.changeTo.disks.length">
                                        <div
                                            style="margin-bottom: 6px"
                                            v-if="scope.row.changeTo"
                                        >
                                            <label>
                                                数据盘(共<span
                                                    style="color: #e83112">
                                                    {{scope.row.changeTo?scope.row.changeTo.disks?scope.row.changeTo.disks.length : 0 : 0}}
                                                    </span
                                                >块)
                                                {{scope.row.changeTo?scope.row.changeTo.disks?':' : '' : ''}}
                                                </label
                                            >
                                        </div>
                                        <!-- <div
                                            style="margin-bottom: 6px"
                                            v-else
                                            v-show="scope.row.disks.length != scope.row.changeTo.disks.length"
                                        >
                                            <label>
                                                2
                                                数据盘(共<span
                                                    style="color: #e83112"
                                                    >
                                                    {{scope.row.disks.length}}
                                                    </span
                                                >块)
                                                {{scope.row.disks.length? scope.row.disks.length: ""}}
                                                </label
                                            >
                                        </div> -->
                                    </template>
                                    <template v-if="scope.row.flavorType == 1 && form.hosts[scope.$index].disks.length != scope.row.changeTo.disks.length" v-show="scope.row.disks.length != scope.row.changeTo.disks.length">
                                        <div
                                            v-if="huanyuan1"
                                            style="margin: 0 0 6px 16px"
                                            v-for="(item, index) in scope.row.changeTo.disks"
                                            :key="index">
                                            <div>
                                                <span>{{item.diskServerName?item.diskServerName:item.diskServerCode_label}}</span>，<span>{{ item.dataDiskSize }}GB</span>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="false" width="450">
                        <template slot="header" slot-scope="scope">
                            <div style="text-align: center">变更后费用</div>
                            <div class="tab_wrap">
                                <div>名称</div>
                                <div>用量</div>
                                <div>单价</div>
                                <div>总价（天）</div>
                            </div>
                        </template>
                        <template
                            slot-scope="scope"
                             v-if="scope.row.changeTo"
                        >
                            <div
                                class="tab_wrap"
                                v-for="(item, index) in scope.row.changeTo.meterageList || [scope.row.meterage]"
                                :key="index"
                            >
                                <div>
                                    {{
                                        item.resourceName
                                            ? item.resourceName
                                            : ""
                                    }}
                                </div>
                                <div>
                                    {{ item.useCount }}{{ item.useCountUnit }}
                                </div>
                                <div>
                                    ¥{{ item.resourcePrice
                                    }}{{ item.resourcePriceUnit }}
                                </div>
                                <div>¥{{ item.resourcePriceTotalStr }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="160"
                        label="操作"
                        class-name="small-padding fixed-width"
                        v-if="taskName == '资源变更' ||taskName == '云服务商处理'"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit-outline"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    showAdd(
                                        2,
                                        (
                                            scope.row.changeTo
                                                ? form.hosts[scope.$index]
                                                      .changeTo.insStatus ==
                                                  'ADD'
                                                : form.hosts[scope.$index]
                                                      .insStatus == 'ADD'
                                        )
                                            ? scope.row
                                            : scope.row.changeTo,
                                        scope.$index
                                    )
                                "
                                >修改
                            </el-button>
                            <el-button
                                v-if="taskName == '资源变更'"
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    del(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        1
                                    )
                                "
                                >删除
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-refresh-left"
                                v-if="taskName == '资源变更'"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus != 'ADD'
                                        : scope.row.insStatus != 'ADD'
                                "
                                @click="
                                    huanyuan(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        1
                                    )
                                "
                                >还原
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>数据库</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    v-if="form.databases"
                    :data="form.databases"
                    style="width: 100%; margin-top: 13px; overflow-x: auto"
                >
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.serverCode_label|| scope.row.serverName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="位数">
                        <template slot-scope="scope">
                            <span>{{ scope.row.systemDigits }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="资源详情" width="300">
                        <template slot-scope="scope">
                            <div
                                placement="top-start"
                                width="300"
                                trigger="hover"
                            >
                                <div style="margin-bottom: 6px">
                                    <label>类型：</label
                                    >{{ scope.row.serverCode_label || scope.row.serverName }}
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>位数：</label
                                    >{{ scope.row.systemDigits }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="变更内容" width="300">
                        <template slot-scope="scope">
                            <div
                                v-show="
                                    form.databases[scope.$index].changeTo
                                        ? !(form.databases[scope.$index].changeTo
                                              .insStatus)
                                        : false
                                "
                            >
                                未变更
                            </div>
                            <div
                                v-show="
                                    form.databases[scope.$index].changeTo
                                        ? form.databases[scope.$index].changeTo
                                              .insStatus == 'REMOVE'
                                        : form.databases[scope.$index]
                                              .insStatus == 'REMOVE'
                                "
                            >
                                已删除
                            </div>
                            <div
                                v-show="
                                    form.databases[scope.$index].changeTo
                                        ? form.databases[scope.$index].changeTo
                                              .insStatus == 'UPDATE'
                                        : form.databases[scope.$index]
                                              .insStatus == 'UPDATE'
                                "
                            >
                                <div
                                    placement="top-start"
                                    width="300"
                                    trigger="hover"
                                >
                                    <div style="margin-bottom: 6px">
                                        <label>类型：</label>
                                        {{
                                            scope.row.changeTo
                                                ? scope.row.changeTo.serverName
                                                : scope.row.serverName
                                        }}
                                    </div>
                                    <div style="margin-bottom: 6px">
                                        <label>位数：</label
                                        >{{
                                            scope.row.changeTo
                                                ? scope.row.changeTo
                                                      .systemDigits
                                                : scope.row.systemDigits
                                        }}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="false" width="400">
                        <template slot="header" slot-scope="scope">
                            <div style="text-align: center">变更后费用</div>
                            <div class="tab_wrap">
                                <div>名称</div>
                                <div>用量</div>
                                <div>单价</div>
                                <div>总价（天）</div>
                            </div>
                        </template>
                        <template
                            slot-scope="scope"
                            v-if="scope.row.changeTo"
                        >
                            <div
                                class="tab_wrap"
                                v-for="(item, index) in scope.row.changeTo
                                    .meterageList || [scope.row.meterage]"
                                :key="index"
                            >
                                <div>
                                    {{
                                        item.resourceName
                                            ? item.resourceName
                                            : ""
                                    }}
                                </div>
                                <div>
                                    {{ item.useCount }}{{ item.useCountUnit }}
                                </div>
                                <div>
                                    ¥{{ item.resourcePrice
                                    }}{{ item.resourcePriceUnit }}
                                </div>
                                <div>¥{{ item.resourcePriceTotalStr }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        class-name="small-padding fixed-width"
                        v-if="taskName == '资源变更'"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit-outline"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    showAdd(
                                        2,
                                        scope.row
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index
                                    )
                                "
                                >修改
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    del(
                                        scope.row
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        2
                                    )
                                "
                                >删除
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-refresh-left"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus != 'ADD'
                                        : scope.row.insStatus != 'ADD'
                                "
                                @click="huanyuan(scope.row, scope.$index, 2)"
                                >还原
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>存储产品</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    v-if="form.storeProducts"
                    :data="form.storeProducts"
                    style="width: 100%; margin-top: 13px; overflow-x: auto"
                >
                    <el-table-column label="磁盘类型">
                        <template slot-scope="scope">
                            {{ scope.row.diskServerName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="磁盘用量">
                        <template
                            v-if="scope.row.dataDiskSize"
                            slot-scope="scope"
                        >
                            <span> {{ scope.row.dataDiskSize }}GB </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="资源详情" width="300">
                        <template slot-scope="scope">
                            <div
                                placement="top-start"
                                width="300"
                                trigger="hover"
                            >
                                <div style="margin-bottom: 6px">
                                    <label>存储类型：</label
                                    >{{ scope.row.productCode }}
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>服务类型：</label
                                    >{{ scope.row.diskCode }}
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>磁盘类型：</label
                                    >{{ scope.row.diskServerName }}
                                </div>
                                <div style="margin-bottom: 6px">
                                        <label>磁盘：</label
                                        >{{
                                            scope.row.diskServerName
                                        }}，{{
                                            scope.row.dataDiskSize
                                        }}GB
                                    </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="变更内容" width="300">
                        <template slot-scope="scope">
                            <div
                                v-show="
                                    form.storeProducts[scope.$index].changeTo? !(form.storeProducts[scope.$index].changeTo.insStatus): false"
                            >
                                未变更
                            </div>
                            <div
                                v-show="
                                    form.storeProducts[scope.$index].changeTo
                                        ? form.storeProducts[scope.$index]
                                              .changeTo.insStatus == 'REMOVE'
                                        : form.storeProducts[scope.$index]
                                              .insStatus == 'REMOVE'
                                "
                            >
                                已删除
                            </div>
                            <div
                                v-show="
                                    form.storeProducts[scope.$index].changeTo
                                        ? form.storeProducts[scope.$index]
                                              .changeTo.insStatus == 'UPDATE'
                                        : form.storeProducts[scope.$index]
                                              .insStatus == 'UPDATE'
                                "
                            >
                                <div
                                    placement="top-start"
                                    width="300"
                                    trigger="hover"
                                >
                                    <div style="margin-bottom: 6px">
                                        <label>存储类型：</label
                                        >{{
                                            scope.row.changeTo
                                                ? scope.row.changeTo.productCode
                                                : scope.row.productCode
                                        }}
                                    </div>
                                    <div style="margin-bottom: 6px">
                                        <label>服务类型：</label
                                        >{{
                                            scope.row.changeTo
                                                ? scope.row.changeTo.diskCode
                                                : scope.row.diskCode
                                        }}
                                    </div>
                                    <div style="margin-bottom: 6px">
                                        <label>磁盘类型：</label
                                        >{{
                                            scope.row.changeTo.diskServerCode_label || scope.row.changeTo.diskServerName
                                        }}
                                    </div>
                                    <div style="margin-bottom: 6px">
                                        <label>磁盘：</label
                                        >{{
                                            scope.row.changeTo.diskServerCode_label
                                                ? scope.row.changeTo
                                                      .diskServerCode_label
                                                : scope.row.changeTo.diskServerName
                                        }}，{{
                                            scope.row.changeTo
                                                ? scope.row.changeTo
                                                      .dataDiskSize
                                                : scope.row.dataDiskSize
                                        }}GB
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="false" width="400">
                        <template slot="header" slot-scope="scope">
                            <div style="text-align: center">变更后费用</div>
                            <div class="tab_wrap">
                                <!-- <div>名称</div> -->
                                <div>用量</div>
                                <div>单价</div>
                                <div>总价（天）</div>
                            </div>
                        </template>
                        <template
                            slot-scope="scope"
                            v-if="scope.row.changeTo"
                        >
                            <div
                                class="tab_wrap"
                                v-for="(item, index) in scope.row.changeTo
                                    .meterageList || [scope.row.meterage]"
                                :key="index"
                            >
                                <!-- <div>{{ item.resourceName ? item.resourceName : '' }}</div> -->
                                <div>
                                    {{ item.useCount }}{{ item.useCountUnit }}
                                </div>
                                <div>
                                    ¥{{ item.resourcePrice
                                    }}{{ item.resourcePriceUnit }}
                                </div>
                                <div>¥{{ item.resourcePriceTotalStr }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        class-name="small-padding fixed-width"
                        v-if="taskName == '资源变更'"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit-outline"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    showAdd(
                                        2,
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index
                                    )
                                "
                                >修改
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    del(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        3
                                    )
                                "
                                >删除
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-refresh-left"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus != 'ADD'
                                        : scope.row.insStatus != 'ADD'
                                "
                                @click="huanyuan(scope.row, scope.$index, 3)"
                                >还原
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>安全产品</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    v-if="form.safeProducts"
                    :data="form.safeProducts"
                    style="width: 100%; margin-top: 13px; overflow-x: auto"
                >
                    <el-table-column label="产品名称">
                        <template slot-scope="scope">
                            {{ scope.row.productName }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="false">
                        <template slot="header" slot-scope="scope">
                            <div style="text-align: center">变更前费用</div>
                            <div class="tab_wrap">
                                <div>用量</div>
                                <div>单价</div>
                                <div>总价（天）</div>
                            </div>
                        </template>
                        <template
                            slot-scope="scope"
                            v-if="scope.row.meterageList?scope.row.meterageList:scope.row.meterage"
                        >
                            <div
                                class="tab_wrap"
                                v-for="(item, index) in scope.row
                                    .meterageList || [scope.row.meterage]"
                                :key="index"
                            >
                                <div>
                                    {{ item.useCount }}{{ item.useCountUnit }}
                                </div>
                                <div>
                                    {{ item.resourcePrice
                                    }}{{ item.resourcePriceUnit }}
                                </div>
                                <div>¥{{ item.resourcePriceTotalStr }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="变更内容">
                        <template slot-scope="scope">
                            <div
                                v-show="
                                    form.safeProducts[scope.$index].changeTo? !(form.safeProducts[scope.$index].changeTo.insStatus): false"
                            >
                                未变更
                            </div>
                            <div
                                v-show="
                                    form.safeProducts[scope.$index].changeTo
                                        ? form.safeProducts[scope.$index]
                                              .changeTo.insStatus == 'REMOVE'
                                        : form.safeProducts[scope.$index]
                                              .insStatus == 'REMOVE'
                                "
                            >
                                已删除
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="false">
                        <template slot="header" slot-scope="scope">
                            <div style="text-align: center">变更后费用</div>
                            <div class="tab_wrap">
                                <div>用量</div>
                                <div>单价</div>
                                <div>总价（天）</div>
                            </div>
                        </template>
                        <template
                            slot-scope="scope"
                            v-if="scope.row.changeTo"
                        >
                            <!-- v-for="(item, index) in scope.row.changeTo.meterage || [scope.row.changeTo.meterageList]" -->
                                <!-- :key="index" -->
                            <div class="tab_wrap">
                                <div>
                                    {{ scope.row.changeTo.meterage?scope.row.changeTo.meterage.useCount : scope.row.changeTo.meterageList.useCount }}
                                    {{ scope.row.changeTo.meterage?scope.row.changeTo.meterage.useCountUnit : scope.row.changeTo.meterageList.useCountUnit }}
                                </div>
                                <div>
                                    {{ scope.row.changeTo.meterage?scope.row.changeTo.meterage.resourcePrice:scope.row.changeTo.meterageList.resourcePrice
                                    }}{{ scope.row.changeTo.meterage?scope.row.changeTo.meterage.resourcePriceUnit : scope.row.changeTo.meterageList.resourcePriceUnit }}
                                </div>
                                <div>¥{{ scope.row.changeTo.meterage?scope.row.changeTo.meterage.resourcePriceTotalStr:scope.row.changeTo.meterageList.resourcePriceTotalStr }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        class-name="small-padding fixed-width"
                        v-if="taskName == '资源变更'"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus !=
                                          'REMOVE'
                                        : scope.row.insStatus != 'REMOVE'
                                "
                                @click="
                                    del(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        4
                                    )
                                "
                                >删除
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-refresh-left"
                                v-show="
                                    scope.row.changeTo
                                        ? scope.row.changeTo.insStatus != 'ADD'
                                        : scope.row.insStatus != 'ADD'
                                "
                                @click="
                                    huanyuan(
                                        scope.row.changeTo
                                            ? scope.row.changeTo
                                            : scope.row,
                                        scope.$index,
                                        4
                                    )
                                "
                                >还原
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div
            v-if="priceFlag"
            style="
                margin-top: 10px;
                text-align: right;
                color: rgb(167, 167, 167);
            "
        >
            变更前预估费用：<span
                style="color: rgb(255, 173, 77); font-size: 24px"
                >¥{{ parseInt(form.dailyPriceTotal) }}</span
            >/天
            <span
                style="
                    margin-left: 20px;
                    color: rgb(255, 173, 77);
                    font-size: 24px;
                "
                >¥{{ parseInt(form.yearPriceTotal) }}</span
            >/年
        </div>
        <div
            v-if="priceFlag"
            style="
                margin-top: 10px;
                text-align: right;
                color: rgb(167, 167, 167);
            "
        >
            变更后预估费用：<span
                style="color: rgb(255, 173, 77); font-size: 24px"
                >¥{{parseInt(form.dailyPriceTotalChangeTo) }}</span
            >/天
            <span
                style="
                    margin-left: 20px;
                    color: rgb(255, 173, 77);
                    font-size: 24px;
                "
                >¥{{parseInt(form.yearPriceTotalChangeTo )}}</span
            >/年
        </div>
        <div
            v-if="priceFlag"
            style="
                margin-top: 10px;
                text-align: right;
                color: rgb(167, 167, 167);
            "
        >
            费用变化：<span style="color: rgb(255, 173, 77); font-size: 24px"
                >¥{{ form.dailyPriceTotalIncr }}</span
            >/天
            <span
                style="
                    margin-left: 20px;
                    color: rgb(255, 173, 77);
                    font-size: 24px;
                "
                >¥{{ form.yearPriceTotalIncr }}</span
            >/年
        </div>
        <div class="title" style="margin-top: 30px" v-if="false">安全产品</div>
        <div class="wrap1" v-if="false">
            <div style="width: 100%">
                <span
                    v-for="(item, index) in form.safeProducts"
                    :key="index"
                    style="margin-left: 20px"
                    >{{ item.productName }}</span
                >
            </div>
        </div>
        <div v-if="otherFlag" class="title" style="margin-top: 30px">其他</div>
        <div v-if="otherFlag" class="wrap2" style="padding-top: 1px">
            <div style="display: flex">
                <span style="font-weight: bold; margin-right: 10px">说明:</span
                >{{ form.remark }}
            </div>
            <div style="font-weight: bold">文件:</div>
            <el-table v-if="form.files" :data="form.files" style="width: 100%">
                <el-table-column prop="fileName" label="文件名称">
                </el-table-column>
                <el-table-column prop="fileExt" label="文件类型">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-show="scope.row.fileExt == 'jpeg' ||
                                        scope.row.fileExt == 'jpg' ||
                                        scope.row.fileExt == 'png' ||
                                        scope.row.fileExt == 'pdf' ||
                                        scope.row.fileExt == 'gif'"
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="previewFile(scope.row)"
                            >预览
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            v-show="taskName =='资源变更'"
                            @click="DeleteFile(scope.row.id)"
                            >删除
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-download"
                            @click="download(scope.row)"
                            >下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template>
            <div class="title" style="margin-top: 30px">处理结果</div>
            <div class="wrap2" style="padding-top: 1px">
                <template v-if="taskName == '云服务商处理'">
                    <div style="display: flex;margin-top: 0px;">
                        <div style="font-weight: bold; margin-right: 10px;width: 50px;">说明:</div>
                            <!-- {{ form.supplierRemark }} -->
                            <el-input style="width: 600px;" type="textarea" v-model="form.supplierRemark" placeholder="请输入说明"></el-input>
                    </div>
                    <div style="font-weight: bold">
                        文件:
                        <el-upload
                            class="upload-demo"
                            style="display: initial;"
                            accept
                            list-type="picture"
                            :show-file-list="false"
                            ref="upload"
                            :file-list="form.supplierFiles"
                            action=""
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleChanges"
                            :on-change="handleChange"
                            :auto-upload="false"
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        </el-upload>
                        <div v-if="supplierFilesState">
                            <el-table
                                v-if="form.supplierFiles"
                                :data="form.supplierFiles"
                                style="width: 80%"
                            >
                                <el-table-column  label="文件名称">
                                    <template slot-scope="scope">
                                        {{scope.row.fileName ? scope.row.fileName : scope.row.name.substring( 0 ,scope.row.name.lastIndexOf("."))}}
                                    </template>
                                </el-table-column>
                                <el-table-column  label="文件类型">
                                    <template slot-scope="scope">
                                        {{ scope.row.fileExt ? scope.row.fileExt : scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1,scope.row.name.length)}}
                                    </template>
                                </el-table-column>
                                <el-table-column label="">
                                    <template slot-scope="scope">
                                        <span :style="scope.row.fileExt ? 'color:green;' : 'color:red;'">
                                            {{scope.row.fileExt ? '已上传' : ''}}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    width="200"
                                    class-name="small-padding fixed-width"
                                    v-if="taskName == '云服务商处理'"
                                >
                                    <template slot-scope="scope">
                                        <el-button
                                            v-show="scope.row.fileExt == 'image/jpeg' ||
                                            scope.row.fileExt == 'image/jpg' ||
                                            scope.row.fileExt == 'image/png' ||
                                            scope.row.fileExt == 'image/pdf' ||
                                            scope.row.fileExt == 'image/gif'"
                                            size="mini"
                                            type="text"
                                            icon="el-icon-view"
                                            @click="previewFiles(scope.row)"
                                            >预览
                                        </el-button>
                                        <el-button
                                            size="mini"
                                            type="text"
                                            icon="el-icon-delete"
                                            @click="DeleteFiles(scope.row)"
                                            v-if="taskName == '云服务商处理'"
                                            >删除
                                        </el-button>
                                        <el-button
                                            size="mini"
                                            type="text"
                                            icon="el-icon-download"
                                            @click="download(scope.row)"
                                            >下载
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div style="display: flex">
                        <span style="font-weight: bold; margin-right: 10px"
                            >说明:</span>
                            {{ form.supplierRemark }}
                    </div>
                    <el-table
                        v-if="form.supplierFiles"
                        :data="form.supplierFiles"
                        style="width: 80%"
                    >
                        <el-table-column prop="fileName" label="文件名称">
                        </el-table-column>
                        <el-table-column prop="fileExt" label="文件类型">
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="200"
                            class-name="small-padding fixed-width"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    v-show="scope.row.fileExt == 'image/jpeg' ||
                                        scope.row.fileExt == 'image/jpg' ||
                                        scope.row.fileExt == 'image/png' ||
                                        scope.row.fileExt == 'image/pdf' ||
                                        scope.row.fileExt == 'image/gif'"
                                    type="text"
                                    icon="el-icon-view"
                                    @click="previewFile(scope.row)"
                                    >预览
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="DeleteFile(scope.row.id)"
                                    v-if="taskName == '云服务商处理'"
                                    >删除
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-download"
                                    @click="download(scope.row)"
                                    >下载
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </template>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
        <!-- 修改弹窗配置 -->
        <el-dialog
            :title="addShow == 1 ? '新增' : '修改'"
            :visible.sync="addShow"
            width="70%"
            append-to-body
        >
            <div style="max-height: 90vh; overflow-y: scroll">
                <TodoBdialog
                    ref="addBdialog"
                    :configure="configure"
                    :hosts="form.hosts"
                    :addShow="addShow"
                    :supplierCode="form.cloudUp ? form.cloudUp.supplierCode : ''"
                    :taskName="taskName"
                    @addTable="addTable"
                />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="$refs.addBdialog.submit()"
                    >确 定</el-button
                >
                <el-button @click="oncelod">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TodoBdialog from "./TodoBdialog";
import {
    DelectUploadFile
  } from "@/api/cloud/cloud";
export default {
    name: "addCtodos",
    components: { TodoBdialog },
    props: {
        form: {
            // type: Object,
            default: null,
        },
        configure: {
            type: Object,
            default: {},
        },
        hosts: {
            type: Array,
            default: function () {
                return [];
            },
        },
        otherFlag: {
            type: Boolean,
            default: true,
        },
        priceFlag: {
            type: Boolean,
            default: false,
        },
        taskName: {
            type: String,
            default: "",
        },
    },
    watch: {
        form(newVal, oldVal) {
            this.form = newVal
            if (!oldVal.cloudSupplier) {
                let oldform = JSON.parse(JSON.stringify(newVal));
                if (oldform.hosts) {
                    oldform.hosts.forEach((item, index) => {
                        if (item.changeTo) {
                            delete oldform.hosts[index].changeTo;
                        }
                    });
                }
                if (oldform.databases) {
                    oldform.databases.forEach((item, index) => {
                        if (item.changeTo) {
                            delete oldform.databases[index].changeTo;
                        }
                    });
                }
                if (oldform.storeProducts) {
                    oldform.storeProducts.forEach((item, index) => {
                        if (item.changeTo) {
                            delete oldform.storeProducts[index].changeTo;
                        }
                    });
                }
                if (oldform.safeProducts) {
                    oldform.safeProducts.forEach((item, index) => {
                        if (item.changeTo) {
                            delete oldform.safeProducts[index].changeTo;
                        }
                    });
                }
                sessionStorage.setItem("oldform", JSON.stringify(oldform));
                setTimeout(() => {
                    this.oldform = JSON.parse(sessionStorage.getItem("oldform"));
                }, 200);
            }
        },
        immediate: true
    },
    data() {
        return {
            base_url: process.env.VUE_APP_BASE_API,
            dialogImageUrl: "",
            dialogVisible: false,
            addShow: false,
            index: 0,
            yyaqList: null,
            //旧数据
            oldform: {},
            huanyuan1: true,
            supplierFilesState : true,
            roleName : sessionStorage.getItem('roleName')
            // CloudServicesFile : [] //云服务审核文件
            //数据
            // form: {
            //     cloudSupplier: undefined, //服务商
            //     hosts: [], //服务器列表
            //     databases: [], //数据库列表
            //     storeProducts: [], //存储产品列表
            //     aqchecked: [], //安全产品
            //     safeProducts: [], //安全产品真实数据
            //     remark: '', //说明
            // },
        };
    },
    created() {
    },
    mounted() {},
    methods: {
        // 翻译高性能规格
        cloudFlavorCodeDesc(data){
            var Name = ''
            this.configure.wlfwqList.forEach(item=>{
                if(item.code == data){
                    Name = item.remark
                }
            })
            return Name
        },
        // 翻译操作系统名称
        TranslateosName(name){
            let OSNae
            this.configure.czxtList.forEach(item=>{
                if(item.code == name){
                    OSNae = item.serviceName
                }
            })
            return OSNae
        },
        oncelod(){
            this.addShow = false
            this.huanyuan1 = true
        },

        // 等保可用域翻译
        availableDomains(id){
            let availableDomainName
            this.configure.available_domain.forEach(item=>{
                if(id == item.dictValue){
                    availableDomainName = item.dictLabel
                }
            })
            return availableDomainName
        },
        cloudFlavorCodes(id){
            let cloudFlavorCodeName
            this.configure.codeList.forEach(item=>{
                if(item.specCode == id){
                    cloudFlavorCodeName = item.specName
                }
            })
            return cloudFlavorCodeName
        },
        cloudFlavorCodess(id){
            let cloudFlavorCodeName
            this.configure.codeList.forEach(item=>{
                if(item.specCode == id){
                    cloudFlavorCodeName = item.desc
                }
            })
            return cloudFlavorCodeName
        },
        wlfwqLists(id){
            let cloudFlavorCodeName
            this.configure.wlfwqList.forEach(item=>{
                if(item.code == id){
                    cloudFlavorCodeName = item.serviceName
                }
            })
            return cloudFlavorCodeName
        },
        wlfwqListss(id){
            let cloudFlavorCodeName
            this.configure.wlfwqList.forEach(item=>{
                if(item.code == id){
                    cloudFlavorCodeName = item.remark
                }
            })
            return cloudFlavorCodeName
        },
        huanyuan(data, index, num) {
            // let form=JSON.parse(JSON.stringify(this.form))
            this.huanyuan1 = false;
            var localStorageoldform = JSON.parse(
                sessionStorage.getItem("oldform")
            );
            if (num == 1) {
                let hostss = localStorageoldform.hosts[index]
                let hostssChangeTo = JSON.parse(JSON.stringify(hostss))
                hostss.changeTo = hostssChangeTo
                this.form.hosts[index] = hostss;
            } else if (num == 2) {
                let flag = this.form.hosts.changeTo
                    ? this.form.hosts.changeTo
                    : this.form.hosts.some((item) => {
                          return (
                              item.id == data.hostId &&
                              item.insStatus != "REMOVE"
                          );
                      });
                if (flag) {
                    let  databases = localStorageoldform.databases[index]
                    let databasesChangeTo = JSON.parse(JSON.stringify(databases))
                    databases.changeTo = databasesChangeTo
                    this.form.databases[index] = databases
                } else {
                    this.$message({
                        type: "error",
                        message: "请先还原相关服务器",
                    });
                }
            } else if (num == 3) {
                if (!data.hostIds) {
                    let storeProducts = localStorageoldform.storeProducts[index]
                    let storeProductschangeTo = JSON.parse(JSON.stringify(storeProducts))
                    storeProducts.changeTo = storeProductschangeTo
                    this.form.storeProducts[index] = storeProductschangeTo;
                } else {
                    let flag = false;
                    if (flag) {
                        this.$message({
                            type: "error",
                            message: "请先还原相关服务器",
                        });
                    } else {
                        let storeProductsa = localStorageoldform.storeProducts[index]
                        let storeProductsachangeTo = JSON.parse(JSON.stringify(storeProductsa))
                        storeProductsa.changeTo = storeProductsachangeTo
                        this.form.storeProducts[index] = storeProductsa;
                    }
                }
            } else {
                let safeProductsa = localStorageoldform.safeProducts[index]
                let changeTo = JSON.parse(JSON.stringify(safeProductsa))
                safeProductsa.changeTo = changeTo
                this.form.safeProducts[index] = safeProductsa;
            }
            //   this.form=form
            this.$emit('assignment' , this.form)
            this.huanyuan1 = true;
        },
        previewFile(item) {
            if(item.fileExt == 'jpeg' ||
               item.fileExt == 'jpg' ||
               item.fileExt == 'png' ||
               item.fileExt == 'gif' ||
               item.fileExt == 'pdf'){
                    this.dialogImageUrl = this.base_url + item.filePath;
                    this.dialogVisible = true;
            }else{
                this.$message.error(`仅限后缀名为 gif、jpeg、jpg、png 可预览`);
            }
        },
        previewFiles(item) {
            if(item.filePath){
                this.dialogImageUrl = this.base_url + item.filePath;
                this.dialogVisible = true;
                return
            }else{
                if(item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'gif' ||
                item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'jpeg' ||
                item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'jpg'||
                item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'gif'||
                item.name.substring(item.name.lastIndexOf(".") + 1,item.name.length) == 'png'){
                    this.dialogImageUrl = item.url;
                    this.dialogVisible = true;
                    return
                }else{
                    this.$message.error(`仅限后缀名为 gif、jpeg、jpg、png 可预览`);
                }
            }
        },
        DeleteFile(id){
            this.supplierFilesState = false
            this.$confirm("是否删除该文件?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                DelectUploadFile(id).then(res => {
                if (res.code == 200) {
                    this.form.files = this.form.files.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.form.supplierFiles = this.form.supplierFiles.filter(item => {
                    if (item.id == id) {

                    } else {
                        return item
                    }
                    })
                    this.$message({
                    message: '删除成功',
                    type: 'success'
                    });
                }
                })
          })
            this.supplierFilesState = true
        },
        download(item){
            let downloadFile = this.base_url + '/system/downloadFile?fileName=' + item.fileName + '&filePath=' + item.filePath
            window.location.href = downloadFile
            return
        },
        DeleteFiles(data){
            this.supplierFilesState = false
            if(data.filePath){
                DelectUploadFile(data.id).then(res=>{
                    if(res.code == 200){
                    this.form.supplierFiles = this.form.supplierFiles.filter(item=>{
                      if(item.id == data.id){

                      }else{
                        return item
                      }
                    })
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                  }
                })
            }else{
                this.form.supplierFiles = this.form.supplierFiles.filter(item=>{
                    if(item.uid == data.uid){

                    }else{
                        return item
                    }
                })
            }
            this.supplierFilesState = true
        },
        //文件列表变化
        handleChange(res, fileList) {
            this.supplierFilesState = false
            this.form.supplierFiles = fileList;
            this.supplierFilesState = true
        },
        handleChanges(res,fileList){
        },
        //添加修改表格
        addTable(data) {
            data = JSON.parse(JSON.stringify(data));
            data.insStatus = "UPDATE";
            if (data.flavorType) {
                if (data.changeTo) {
                    let addHostsdata = JSON.parse(JSON.stringify(data));
                    delete addHostsdata.changeTo;
                    this.addHosts(addHostsdata);
                } else {
                    this.addHosts(data);
                }
            } else if (data.serverCode) {
                this.addDatabases(data);
            } else if (data.diskServerCode) {
                this.addStoreProducts(data);
            } else {
                let hostIds = [];
                this.form.hosts.forEach((item) => {
                    hostIds.push(item.id);
                });
                this.form.safeProducts = [];
                let safeProductsAll = [];
                this.configure.yyaqList.forEach((item) => {
                    safeProductsAll.push({
                        productCode: item.code,
                        productName: item.serviceName,
                        hostIds,
                    });
                });
                this.form.safeProducts = safeProductsAll;
                this.addShow = false;
                this.$emit('assignment' , this.form)
                this.huanyuan1 = true
            }
        },
        //添加存储产品列表
        addStoreProducts(data) {
            this.configure[
                data.productCode == "共享型" ? "ccList" : "fwcpList"
            ].some((it) => {
                if (it.code == data.diskServerCode) {
                    data.diskServerCode_label = it.serviceName;
                    return true;
                }
            });
            if (this.addShow == 2) {
                this.form.storeProducts[this.index].changeTo = data;
            } else {
                this.form.storeProducts.push(JSON.parse(JSON.stringify(data)));
            }
            this.addShow = false;
            this.huanyuan1 = true
        },
        //添加修改数据库列表
        addDatabases(data) {
            //数据库类型
            this.configure.sjkList.some((it) => {
                if (it.code == data.serverCode) {
                    data.serverCode_label = it.serviceName;
                    return true;
                }
            });
            if (this.addShow == 2) {
                this.form.databases[this.index].changeTo = data;
            } else {
                this.form.databases.push(data);
            }
            this.addShow = false;
            this.huanyuan1 = true
        },
        //添加修改服务器列表
        addHosts(data) {
            if(Array.isArray(data.osServerCode)){
                data.osServerCode = data.osServerCode[0]
            }
            //可用域
            this.configure.available_domain.some((item) => {
                if (item.dictValue == data.availableDomain) {
                    data.availableDomain_label = item.dictLabel;
                    return true;
                }
            });
            //数据盘类型
            if(data.disks){
                data.disks.forEach((item) => {
                    this.configure.ccList.some((it) => {
                        if (it.code == item.diskServerCode) {
                            item.diskServerCode_label = it.serviceName;
                            return true;
                        }
                    });
                });
            }
            if (data.flavorType == 1) {
                //系统盘类型
                if(data.osDisk){
                    this.configure.storage_type.some((item) => {
                        if (item.code == data.osDisk.diskServerCode) {
                            data.osDisk.diskServerCode_label = item.serviceName;
                            return true;
                        }
                    });
                }

                //规格
                this.configure.codeList.some((item) => {
                    if (item.specCode == data.cloudFlavorCode) {
                        data.cloudFlavorCode_label = item.specName;
                        data.cloudFlavorCode_desc = item.desc;
                        return true;
                    }
                });
            }
            if (data.flavorType == 2) {
                this.configure.wlfwqList.some((item) => {
                    if (item.code == data.cloudFlavorCode) {
                        data.cloudFlavorCode_label = item.serviceName;
                        data.cloudFlavorCode_desc = item.remark;
                        return true;
                    }
                });
            }
            if (this.addShow == 2) {
                if (
                    data.hostName &&
                    data.hostName == data.instanceName + "_" + data.num
                ) {
                    this.form.hosts[this.index].changeTo = data;
                } else {
                    this.form.hosts[this.index].changeTo = data;
                }
            } else {
                let num = Number(data.instanceNum);
                data.instanceNum = 1;
                let sum = 0;
                this.form.hosts.forEach((item) => {
                    if (
                        item.instanceName == data.instanceName &&
                        item.num > sum
                    ) {
                        sum = item.num;
                    }
                });
                for (let i = 0; i < num; i++) {
                    let temp = JSON.parse(JSON.stringify(data));
                    if (!temp.num) {
                        temp.num = sum + i + 1;
                    }
                    temp.hostName = temp.instanceName + "_" + temp.num;
                    this.form.hosts[this.index].changeTo = temp;
                }
            }

            this.addShow = false;
            this.huanyuan1 = true
        },
        //显示弹窗
        showAdd(num, data, index) {
            this.index = index;
            this.addShow = num;
            setTimeout(() => {
                this.huanyuan1 = false
                this.$refs.addBdialog.init(JSON.parse(JSON.stringify(data)));
            }, 200);
        },
        //删除
        del(data, index, num) {
            let form = JSON.parse(JSON.stringify(this.form));
            if (num == 1) {
                let delhosts = JSON.parse(
                    JSON.stringify(this.oldform.hosts[index])
                );
                delhosts.insStatus = "REMOVE";
                form.hosts[index].changeTo = delhosts;
                form.databases.forEach((item) => {
                    if (item.hostId == data.id) {
                        item.insStatus = "REMOVE";
                    }
                });
                form.storeProducts.forEach((item) => {
                    if (item.hostIds && item.hostIds.indexOf(data.id) > -1) {
                        item.insStatus = "REMOVE";
                    }
                });
            } else if (num == 2) {
                let deldatabases = JSON.parse(
                    JSON.stringify(this.oldform.databases[index])
                );
                deldatabases.insStatus = "REMOVE";
                form.databases[index].changeTo = deldatabases;
            } else if (num == 3) {
                let delstoreProducts = JSON.parse(
                    JSON.stringify(this.oldform.storeProducts[index])
                );
                delstoreProducts.insStatus = "REMOVE";
                form.storeProducts[index].changeTo = delstoreProducts;
            } else {
                let delsafeProducts = JSON.parse(
                    JSON.stringify(this.oldform.safeProducts[index])
                );
                delsafeProducts.insStatus = "REMOVE";
                form.safeProducts[index].changeTo = delsafeProducts;
            }
            this.form = form;
            this.$emit('assignment' , this.form)
        },
        dels(data, index) {
            this.$confirm("是否删除?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.form.safeProducts.splice(index, 1);
            });
        },
        //文件预览
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
    },
};
</script>

<style scoped lang="scss">
.dialog {
    padding-right: 20px;
    font-size: 12px;
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .wrap {
        display: flex;
        background: #faf9ff;
        margin-top: 20px;
        border-radius: 10px;

        .wrap_title {
            padding: 0 10px;
            background: #f4f4f4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;

            div {
                height: 100%;
                width: 14px;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .wrap_item {
            display: flex;
            margin-top: 20px;

            div:first-child {
                width: 90px;
                font-weight: bold;
            }

            i {
                line-height: 28px;
                margin-right: 10px;
                font-size: 20px;
                color: #e83112;
            }
        }
    }
    .wrap1 {
        padding: 0 20px 20px 0px;
        background: #faf9ff;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        // justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
            margin-left: 20px;
            width: calc(25% - 20px);
            min-width: 340px;
            display: flex;
            div {
                width: 100px;
                min-width: 100px;
                font-weight: bold;
                margin: 0;
                display: flex;
                padding-right: 10px;
                justify-content: flex-end;
                color: #606266;
            }
        }
    }
    .wrap2 {
        padding: 0 20px 20px 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
        }
    }
    .wrap3 {
        padding: 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
    }
    .tab_wrap {
        display: flex;
        justify-content: space-between;
        div {
            width: 25%;
            padding: 10px 0;
        }
        div:first-child {
            font-weight: bold;
        }
    }
}
</style>
